<template>
  <div class="custom-dialog">
    <el-dialog
      v-el-drag-dialog
      width="500px"
      top="10vh"
      :title="$t('route.fund') + '--' + $t('table.'+actionType)"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      custom-class="dialog-title-background"
      @open="handleOpen"
    >
      <div style="margin-bottom: 15px">
        <el-button type="primary" icon="el-icon-circle-check" @click="handleConfirm">保存</el-button>
        <el-button class="pause-button" icon="el-icon-circle-close" @click="handleCancel">取消</el-button>
      </div>
      <el-form
        ref="form"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="temp.name"
            style="width:80%"
            @keyup.enter.native="handleKeyPress"
          />
        </el-form-item>
        <el-form-item label="上级类型" prop="type">
          <el-select
            v-model="temp.type"
            filterable
            clearable
            :disabled="actionType==='update'"
            class="acctype"
          >
            <el-option
              v-for="item in typeList"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            >
              <span style="float: left">{{ item.type }}</span>
              <span style="float: right; color: #8492a6;">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { addOne, updateOne } from '@/api/information'

export default {
  name: 'ConstDialog',
  directives: {
    elDragDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    actionType: {
      type: String,
      default: 'add'
    },
    typeList: {
      type: Array,
      default: function() {
        return []
      }
    },
    multiple: {
      type: Array,
      default: function() {
        return []
      }
    },
    data: {
      type: Object,
      default: function() {
        return {}
      }
    },
    filterCondition: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      temp: {},
      rules: {
        name: [{ required: true, message: ' ', trigger: 'change' }]
      }
    }
  },
  watch: {
    data: {
      handler() {
        this.temp = JSON.parse(JSON.stringify(this.data))
      },
      deep: true
    }
  },
  methods: {
    async handleOpen() {
      if (this.multiple.length > 0) {
        this.temp.type = this.multiple[0].type
      } else {
        this.temp.type = ''
      }
      // 清除红框
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    handleCancel() {
      this.$confirm('是否放弃保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setVisible(false)
      }).catch(() => {
      })
    },
    handleClose() {
      this.setVisible(false)
    },
    handleConfirm() {
      switch (this.actionType) {
        case 'add':
          this.createData()
          break
        case 'update':
          this.updateData()
          break
        default:
          break
      }
    },
    createData() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          const list = this.typeList.filter(item => { return item.typeCode === this.temp.oldTypeId })
          if (list.length > 0) {
            this.temp.oldTypeName = list[0].name
          } else {
            this.temp.oldTypeName = null
          }
          if (this.temp.type) {
            this.temp.oldTypeId = this.temp.type
          } else {
            this.temp.oldTypeId = null
            this.temp.type = this.typeList.length + 1
            this.temp.typeCode = this.typeList.length + 1
          }
          const params = Object.assign({}, this.temp)
          const res = await addOne('getConstantAdd', params)
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.setVisible(false)
            this.$emit('add-data')
          }
        } else {
          this.$alert('有必选项未填', '警告', {
            confirmButtonText: '确定'
          })
          return false
        }
      })
    },
    updateData() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          const res = await updateOne('getConstantUpdate', this.temp)
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.setVisible(false)
            this.$emit('refresh-data')
          }
        } else {
          this.$alert('有必选项未填', '警告', {
            confirmButtonText: '确定'
          })
          return false
        }
      })
    },
    handleKeyPress(event) {
      if (event.keyCode === 13) {
        event.preventDefault()
      }
    },
    setVisible(flag) {
      this.temp.type = ''
      this.$emit('update:visible', flag)
    },
    handleAccountTypeChange(val) {
      this.temp.type = ''
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-select--mini{
  width: 80%;
}
.acctype {
  ::v-deep .el-input__inner{
    height: 30px !important;
  }
}
</style>
